<!DOCTYPE html>
<html lang="en" ng-app="listenone">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags-->
    <meta name="description" content="">
    <meta name="author" content="">
    <title ng-bind="page_title">Listen 1</title>
    <!-- link href="css/bootstrap.min.css" rel="stylesheet"-->
    <link href="css/angular-ui-notification.css" rel="stylesheet">
    <link href="css/hotkeys.css" rel="stylesheet">
    <link href="css/icon.css" rel="stylesheet">

    <link href="css/origin.css" rel="stylesheet" id="theme">
    <link href="css/common.css" rel="stylesheet">
    
    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
    <script type="text/javascript" src="js/vendor/angular.min.js"></script>
    <script src="js/vendor/angular-translate.min.js"></script>
    <script src="js/vendor/angular-translate-loader-static-files.min.js"></script>
    <script type="text/javascript" src="js/vendor/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/vendor/angular-soundmanager2.js"></script>
    <script type="text/javascript" src="js/vendor/angular-ui-notification.js"></script>
    <script type="text/javascript" src="js/vendor/hotkeys.js"></script>
    <script type="text/javascript" src="js/vendor/md5.js"></script>
    <script type="text/javascript" src="js/vendor/aes.js"></script>
    <script type="text/javascript" src="js/vendor/bigint.js"></script>
    <script type="text/javascript" src="js/vendor/timer.js"></script>
    <script type="text/javascript" src="js/vendor/async.min.js"></script>
    <script type="text/javascript" src="js/vendor/cryptojs_aes.js"></script>
    <script type="text/javascript" src="js/vendor/jsencrypt.min.js"></script>
    <script type="text/javascript" src="js/github_api.js"></script>
    <script type="text/javascript" src="js/github.js"></script>
    <script type="text/javascript" src="js/lastfm.js"></script>
    <script type="text/javascript" src="js/lowebutil.js"></script>
    <script type="text/javascript" src="js/provider/xiami.js"></script>
    <script type="text/javascript" src="js/provider/qq.js"></script>
    <script type="text/javascript" src="js/provider/netease.js"></script>
    <script type="text/javascript" src="js/provider/kugou.js"></script>
    <script type="text/javascript" src="js/provider/kuwo.js"></script>
    <script type="text/javascript" src="js/provider/bilibili.js"></script>
    <script type="text/javascript" src="js/provider/migu.js"></script>
    <script type="text/javascript" src="js/myplaylist.js"></script>
    <script type="text/javascript" src="js/loweb.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

    <script>if (window.module) module = window.module;</script>
</head>

<body>
    <div ng-controller="PlayController as playCtrl" ng-init="loadLocalSettings()">
    <div ng-controller="ProfileController">
    <div ng-controller="NavigationController">
    <div class="wrap">
        <!-- dialog-->
        <div class="shadow" ng-hide="is_dialog_hidden==1"></div>
        <div class="dialog" ng-hide="is_dialog_hidden==1" ng-style="myStyle">
          <div class="dialog-header"><span>{{ dialog_title }}</span><span class="dialog-close" ng-click="closeDialog()">×</span></div>
          <div class="dialog-body">
            <!-- choose playlist dialog-->
            <ul class="dialog-playlist" ng-show="dialog_type==0">
              <li class="detail-add" ng-click="newDialogOption(1)"><img src="images/mycover.jpg" />
                <h2> {{_CREATE_PLAYLIST}} </h2>
              </li>
              <li ng-repeat="playlist in myplaylist track by $index" ng-class-odd="'odd'" ng-class-even="'even'" ng-click="chooseDialogOption(playlist.info.id)"><img ng-src="{{ playlist.info.cover_img_url }}" />
                <h2> {{ playlist.info.title }} </h2>
              </li>
            </ul>
            <!-- create new playlist dialog-->
            <div class="dialog-newplaylist" ng-show="dialog_type==1">
              <input class="form-control" type="text" placeholder="{{_INPUT_NEW_PLAYLIST_TITLE}}" ng-model="newlist_title" />
              <button class="btn btn-primary confirm-button" ng-click="createAndAddPlaylist()">{{_COMFIRM}}</button>
              <button class="btn btn-default" ng-click="cancelNewDialog(0)">{{_CANCEL}}</button>
            </div>
            <!-- edit playlist dialog-->
            <div class="dialog-editplaylist" ng-show="dialog_type==3">
              <div class="form-group">
                <label>{{_PLAYLIST_TITLE}}</label>
                <input class="form-control" type="text" placeholder="{{_INPUT_PLAYLIST_TITLE}}" ng-model="dialog_playlist_title" />
              </div>
              <div class="form-group">
                <label>{{_PLAYLIST_COVER_IMAGE_URL}}</label>
                <input class="form-control" type="text" placeholder="{{_INPUT_PLAYLIST_COVER_IMAGE_URL}}" ng-model="dialog_cover_img_url" />
              </div>
              <button class="btn btn-primary confirm-button" ng-click="editMyPlaylist(list_id)">{{_COMFIRM}}</button>
              <button class="btn btn-default" ng-click="closeDialog()">{{_CANCEL}}</button>
              <div class="dialog-footer">
                <button class="btn btn-danger remove-button" ng-click="removeMyPlaylist(list_id)">{{_REMOVE_PLAYLIST}}</button>
              </div>
            </div>
            <div class="dialog-connect-lastfm" ng-show="dialog_type==4">
              <p>{{_OPENING_LASTFM_PAGE}}</p>
              <p>{{_CONFIRM_NOTICE_LASTFM}}</p>
              <div class="buttons">
                <button class="btn btn-primary confirm-button" ng-click="lastfm.updateStatus();closeDialog();">{{_AUTHORIZED_FINISHED}}</button>
                <button class="btn btn-warning warning-button" ng-click="lastfm.getAuth();">{{_AUTHORIZED_REOPEN}}</button>
              </div>
            </div>
            <!-- open playlist dialog-->
            <div class="dialog-open-url" ng-show="dialog_type==5">
              <div class="form-group">
                <label>{{_PLAYLIST_LINK}}</label>
                <input class="form-control" type="text" placeholder="{{_EXAMPLE}}http://www.xiami.com/collect/198267231" ng-model="dialog_url" />
              </div>
              <button class="btn btn-primary confirm-button" ng-click="openUrl(dialog_url);closeDialog();dialog_url='';">{{_COMFIRM}}</button>
              <button class="btn btn-default" ng-click="closeDialog()">{{_CANCEL}}</button>
            </div>
            <ul class="dialog-merge-playlist" ng-show="dialog_type==6">
              <li ng-repeat="playlist in myplaylist track by $index" ng-class-odd="'odd'" ng-class-even="'even'" ng-click="mergePlaylist(playlist.info.id)"><img ng-src="{{ playlist.info.cover_img_url }}" />
                <h2> {{ playlist.info.title }} </h2>
              </li>
            </ul>
            <div class="dialog-connect-github" ng-show="dialog_type==7">
              <p>{{_OPENING_GITHUB_PAGE}}</p>
              <p>{{_CONFIRM_NOTICE_GITHUB}}</p>
              <div class="buttons">
                <button class="btn btn-primary confirm-button" ng-click="github.updateStatus();closeDialog();">{{_AUTHORIZED_FINISHED}}</button>
                <button class="btn btn-warning warning-button" ng-click="github.openAuthUrl();">{{_AUTHORIZED_REOPEN}}</button>
              </div>
            </div>
            <ul class="dialog-backuplist" ng-show="dialog_type==8">
              <li class="detail-add" ng-click="newDialogOption(9)"><img src="images/mycover.jpg" />
                <h2> {{_CREATE_PLAYLIST_BACKUP}} </h2>
              </li>
              <li ng-repeat="backup in myBackup track by $index" ng-class-odd="'odd'" ng-class-even="'even'" ng-click="backupMySettings2Gist(backup.id, backup.public); closeDialog();"><img ng-src="images/mycover.jpg" />
                <h2> {{ backup.id }}<br/>  {{backup.description}} </h2>

              </li>
            </ul>
            <!-- create new backup dialog-->
            <div class="dialog-newbackup" ng-show="dialog_type==9">
              <button class="btn btn-primary confirm-button" ng-click="backupMySettings2Gist(null, true);closeDialog();">{{_CREATE_PUBLIC_BACKUP}}</button>
              <button class="btn btn-primary confirm-button" ng-click="backupMySettings2Gist(null, false);closeDialog();">{{_CREATE_PRIVATE_BACKUP}}</button>
              <button class="btn btn-default" ng-click="cancelNewDialog(8)">{{_CANCEL}}</button>
            </div>
            <ul class="dialog-backuplist" ng-show="dialog_type==10">
              <li ng-repeat="backup in myBackup track by $index" ng-class-odd="'odd'" ng-class-even="'even'" ng-click="importMySettingsFromGist(backup.id); closeDialog();"><img ng-src="images/mycover.jpg" />
                <h2> {{ backup.id }} {{backup.description}}</h2>
              </li>
            </ul>
          </div>
        </div>

                    <div class="main" ng-controller="MyPlayListController">
                        <div class="sidebar">
                            <div class="flex-scroll-wrapper">
                                <div class="menu-control"></div>
                <div class="menu-title"><div class="title">{{_PLATFORM_UNION}}</div></div>
                                <ul class="nav masthead-nav">
                                    <li ng-class="{ 'active':(current_tag==2) && (window_url_stack.length ==0) }" ng-click="showTag(2)"><span class="icon li-featured-list"></span><a>{{_PLAYLISTS}}</a></li>
                                </ul>
                                <div class="menu-title" ng-init="loadMyPlaylist();">
                                    <div class="title">{{_MY_MUSIC}}</div>
                                    <svg class="feather icon" ng-click="showDialog(5)"><use xlink:href="images/feather-sprite.svg#plus-square"></use></svg></div>
                                <ul class="nav masthead-nav">
                                    <li ng-repeat="i in myplaylists track by $index" ng-class="{ 'active':window_type=='list' && (('/playlist?list_id='+i.info.id)==window_url_stack[window_url_stack.length-1]) }" ng-click="showPlaylist(i.info.id)"><svg class="feather"><use xlink:href="images/feather-sprite.svg#disc"></use></svg><a>{{i.info.title}}</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="content" ng-controller="InstantSearchController">
                            <div class="navigation">
                                <div class="backfront">
                                    <span class="icon li-back" ng-click="popWindow()"></span>
                                    <span class="icon li-advance" ng-click="forwardWindow()"></span>
                                </div>
                                <div class="search">
                    <input class="form-control search-input"
                        id="search-input" type="text" ng-model="keywords" placeholder="{{_SEARCH_PLACEHOLDER}}" ng-model-options="{debounce: 500}">
                                </div>
                                <div ng-class="{ 'active': (current_tag==4) && (window_url_stack.length ==0)}" ng-click="showTag(4)" class="settings">
                                    <span class="icon li-setting"></span>
                                </div>
                                <div ng-if="!isChrome && !isMac" class="window-control">
                      <svg class="icon" window-control="window_min"><use xlink:href="images/feather-sprite.svg#minimize-2"></use></svg>
                      <svg class="icon" window-control="window_max"><use xlink:href="images/feather-sprite.svg#maximize" ></use></svg>
                      <svg class="icon" window-control="window_close"><use xlink:href="images/feather-sprite.svg#x"></use></svg>
                                </div>
                            </div>
                            <div class="browser flex-scroll-wrapper" infinite-scroll="scrolling()" content-selector="'#playlist-content'">
                                <!-- hot playlist window-->
                                <div class="page page-hot-playlist" ng-show="current_tag==2 && is_window_hidden==1" ng-controller="PlayListController" ng-init="loadPlaylist();">
                                    <div class="source-list" ng-show="is_window_hidden==1">
                                        <div class="source-button" ng-class="{'active':isActiveTab(0)}" ng-click="changeTab(0)">{{_NETEASE_MUSIC}}</div>
                                        <div class="splitter"></div>
                                        <div class="source-button" ng-class="{'active':isActiveTab(1)}" ng-click="changeTab(1)">{{_XIAMI_MUSIC}}</div>
                                        <div class="splitter"></div>
                                        <div class="source-button" ng-class="{'active':isActiveTab(2)}" ng-click="changeTab(2)">{{_QQ_MUSIC}}</div>
                                        <div class="splitter"></div>
                                        <div class="source-button" ng-class="{'active':isActiveTab(4)}" ng-click="changeTab(4)">{{_KUGOU_MUSIC}}</div>
                                        <div class="splitter"></div>
                                        <div class="source-button" ng-class="{'active':isActiveTab(5)}" ng-click="changeTab(5)">{{_KUWO_MUSIC}}</div>
                                        <div class="splitter"></div>
                                        <div class="source-button" ng-class="{'active':isActiveTab(6)}" ng-click="changeTab(6)">{{_BILIBILI_MUSIC}}</div>
                                        <div class="splitter"></div>
                                        <div class="source-button" ng-class="{'active':isActiveTab(7)}" ng-click="changeTab(7)">{{_MIGU_MUSIC}}</div>
                                    </div>

                                    <div class="site-wrapper-innerd" id="hotplaylist">
                                        <div class="cover-container" id="playlist-content">
                                            <ul class="playlist-covers">
                                                <li ng-repeat="i in result ">
                                                    <div class="u-cover"><img ng-src="{{i.cover_img_url}}" ng-click="showPlaylist(i.id)">
                                                        <div class="bottom" ng-click="directplaylist(i.id)"><svg class="feather"><use xlink:href="images/feather-sprite.svg#play-circle"></use></svg></div>
                                                    </div>
                                                    <div class="desc"><span ng-click="showPlaylist(i.id)">{{i.title}}</span></div>
                                                </li>
                                                <div class="loading_bottom"> <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40"
                                    <div class="loading_bottom">  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/> <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z"> <animateTransform attributeType="xml" attributeName="transform"  type="rotate" from="0 20 20"  to="360 20 20" dur="0.6s" repeatCount="indefinite"/> </path> </svg></div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                    <!-- content page: 快速搜索 -->
                    <div class="page" ng-show="current_tag==3 && is_window_hidden==1">
                      <div class="site-wrapper-innerd">
                        <div class="cover-container">
                          <!-- Initialize a new AngularJS app and associate it with a module named "instantSearch"-->
                          <div class="searchbox"  >
                            <ul class="source-list">
                              <li class="source-button" ng-class="{'active':isActiveTab(0)}" ng-click="changeSourceTab(0)"><a>{{_NETEASE_MUSIC}}</a></li><div class="splitter"></div>
                              <li class="source-button" ng-class="{'active':isActiveTab(1)}" ng-click="changeSourceTab(1)"><a>{{_XIAMI_MUSIC}}</a></li><div class="splitter"></div>
                              <li class="source-button" ng-class="{'active':isActiveTab(2)}" ng-click="changeSourceTab(2)"><a>{{_QQ_MUSIC}}</a></li><div class="splitter"></div>
<!--                               <li  ng-class="{'active':isActiveTab(3)}" ng-click="changeSourceTab(3)" ng-show="isDoubanLogin"><a>豆瓣</a></li> -->
                              <li class="source-button" ng-class="{'active':isActiveTab(4)}" ng-click="changeSourceTab(4)"><a>{{_KUGOU_MUSIC}}</a></li><div class="splitter"></div>
                              <li class="source-button" ng-class="{'active':isActiveTab(5)}" ng-click="changeSourceTab(5)"><a>{{_KUWO_MUSIC}}</a></li><div class="splitter"></div>
                              <!--  <li class="source-button" ng-class="{'active':isActiveTab(6)}" ng-click="changeSourceTab(6)"><a>{{_BILIBILI_MUSIC}}</a></li>-->
                             <li class="source-button" ng-class="{'active':isActiveTab(7)}" ng-click="changeSourceTab(7)"><a>{{_MIGU_MUSIC}}</a></li>
                              <svg class="searchspinner" ng-show="loading" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/> <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z"> <animateTransform attributeType="xml" attributeName="transform"  type="rotate" from="0 20 20"  to="360 20 20" dur="0.6s" repeatCount="indefinite"/> </path> </svg>

                                                </ul>
                                                <ul class="detail-songlist">
                                                    <li class="head">
                                                        <div class="title"><a>{{_SONGS}}</a></div>
                                                        <div class="artist"><a>{{_ARTISTS}}</a></div>
                                                        <div class="album"><a>{{_ALBUMS}}</a></div>
                                                        <div class="tools">{{_OPERATION}}</div>
                                                    </li>
                                                    <li ng-repeat="song in result" ng-class-odd="'odd'" ng-class-even="'even'" ng-mouseenter="options=true" ng-mouseleave="options=false">
                                                        <div class="title">
                                                            <a ng-if="song.disabled" class="disabled" ng-click="copyrightNotice()">{{ song.title |limitTo:30}}</a>
                                                            <a ng-if="!song.disabled" add-and-play="song">{{ song.title |limitTo:30}}</a>
                                                        </div>
                                                        <div class="artist"><a ng-click="showPlaylist(song.artist_id)">{{ song.artist |limitTo:20}}</a></div>
                                                        <div class="album"><a ng-click="showPlaylist(song.album_id)">{{ song.album |limitTo:30}}</a></div>

                                                        <div class="tools">
                                                            <a title="{{_ADD_TO_QUEUE}}" class="detail-add-button" add-without-play="song" ng-show="options"><span class="icon li-add"></span></a>
                                                            <a title="{{_ADD_TO_PLAYLIST}}" class="detail-fav-button" ng-show="options" ng-click="showDialog(0, song)"><span class="icon li-songlist"></span></a>
                                                            <a title="{{_REMOVE_FROM_PLAYLIST}}" class="detail-delete-button" ng-click="removeSongFromPlaylist(song, list_id)" ng-show="options && is_mine=='1' "><span class="icon li-del"></span></a>
                                                            <a title="{{_ORIGIN_LINK}}" class="source-button" open-url="song.source_url" ng-show="options"><span class="icon li-link"></span></a>
                                                        </div>
                                                    </li>
                                                </ul>
                                                <div class="search-pagination" ng-show="totalpage>1" pagination></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                    <!-- content page: 设置 -->
                    <div class="page" ng-show="current_tag==4 && is_window_hidden==1" ng-init="lastfm.updateStatus(); github.updateStatus();">
                      <div class="site-wrapper-innerd">
                        <div class="cover-container">
                          <div class="settings-title"><span>{{_LANGUAGE}}<span></div>
                          <div class="settings-content">
                            <div>
                              <button class="language-button" ng-click="setLang('zh_CN')">简体中文</button>
                              <button class="language-button" ng-click="setLang('en_US')">English</button>
                              <button class="language-button" ng-click="setLang('fr_FR')">French</button>
                            </div>
                          </div>
                          <div class="settings-title"><span>{{_THEME}}<span></div>
                          <div class="settings-content">
                            <div>
                              <button class="theme-button" ng-click="setTheme('white')">{{_THEME_WHITE}}</button>
                              <button class="theme-button" ng-click="setTheme('black')">{{_THEME_BLACK}}</button>
                            </div>
                          </div>
                          <div class="settings-title"><span>{{_BACKUP_PLAYLIST}}<span></div>
                          <div class="settings-content">
                            <p>{{_BACKUP_WARNING}}</p>
                            <div>
                              <button class="btn btn-primary confirm-button" ng-click="backupMySettings()">{{_EXPORT_TO_LOCAL_FILE}}</button>
                               <button class="btn btn-primary confirm-button" ng-show="github.getStatus() == 2" ng-click="showDialog(8)">{{_EXPORT_TO_GITHUB_GIST}}</button>
                            </div>
                          </div>
                          <div class="settings-title"><span>{{_RECOVER_PLAYLIST}}<span></div>
                            <div class="settings-content">
                              <p>{{_RECOVER_WARNING}}</p>
                            <label class="upload-button" for="my-file-selector">
                              <input id="my-file-selector" type="file" style="display:none;" ng-model="myuploadfiles"  custom-on-change="importMySettings">{{_RECOVER_FROM_LOCAL_FILE}}
                            </label>
                            <button class="btn btn-warning confirm-button" ng-show="github.getStatus() == 2" ng-click="showDialog(10)">{{_RECOVER_FROM_GITHUB_GIST}}</button>
                          </div>

                          <div class="settings-title"><span>{{_CONNECT_TO_GITHUB}}<span></div>
                          <div class="settings-content">
                            <div>
                              <p> {{_STATUS}}：{{ github.getStatusText() }} </p>
                              <button class="btn btn-primary confirm-button" ng-show="github.getStatus() == 0" ng-click="github.openAuthUrl(); showDialog(7);">{{_CONNECT_TO_GITHUB}}</button>
                              <button class="btn btn-warning confirm-button" ng-show="github.getStatus() == 1" ng-click="showDialog(7);">{{_RECONNECT}}</button>
                              <button class="btn btn-primary confirm-button" ng-show="github.getStatus() == 2" ng-click="github.logout();">{{_CANCEL_CONNECT}}</button>
                            </div>
                          </div>

                          <div class="settings-title"><span>{{_SHORTCUTS}}<span></div>
                          <div class="settings-content">
                            <button class="btn btn-primary confirm-button" ng-click="showShortcuts()">{{_VIEW_SHORTCUTS_LIST}}</button>
                              <div class="shortcut" ng-if="!isChrome" class="btn btn-primary confirm-button" >
                                <svg class="feather" ng-show="!enableGlobalShortCut" ng-click="applyGlobalShortcut(true)"><use xlink:href="images/feather-sprite.svg#square"></use></svg>
                                <svg class="feather" ng-show="enableGlobalShortCut" ng-click="applyGlobalShortcut(true)"><use xlink:href="images/feather-sprite.svg#check-square"></use></svg>
                                <span ng-show="enableGlobalShortCut"></span>{{_GLOBAL_SHORTCUTS_NOTICE}}
                                            </div>
                                        </div>
                                        <div class="settings-title"><span>{{_CONNECT_TO_LASTFM}}<span></div>
                          <div class="settings-content">
                            <div>
                              <p> {{_STATUS}}：{{ lastfm.getStatusText() }} </p>
                              <button class="btn btn-primary confirm-button" ng-show="!lastfm.isAuthRequested()" ng-click="lastfm.getAuth(); showDialog(4);">{{_CONNECT_TO_LASTFM}}</button>
                              <button class="btn btn-warning confirm-button" ng-show="lastfm.isAuthRequested() && !lastfm.isAuthorized()" ng-click="lastfm.getAuth(); showDialog(4);">{{_RECONNECT}}</button>
                              <button class="btn btn-primary confirm-button" ng-show="lastfm.isAuthRequested()" ng-click="lastfm.cancelAuth();">{{_CANCEL_CONNECT}}</button>
                            </div>
                          </div>
                          <div class="settings-title"><span>{{_LYRIC_DISPLAY}}</span></div>
                                        <div class="settings-content">
                                            <div class="shortcut" ng-if="!isChrome" class="btn btn-primary confirm-button">
                                                <svg class="feather" ng-show="!enableLyricFloatingWindow" ng-click="openLyricFloatingWindow(true)"><use xlink:href="images/feather-sprite.svg#square"></use></svg>
                                                <svg class="feather" ng-show="enableLyricFloatingWindow" ng-click="openLyricFloatingWindow(true)"><use xlink:href="images/feather-sprite.svg#check-square"></use></svg>
                                                <span ng-show="enableLyricFloatingWindow"></span>{{_SHOW_DESKTOP_LYRIC}}
                                            </div>
                                        </div>
                                        <div class="settings-title"><span>{{_ABOUT}}<span></div>
                          <div class="settings-content">
                            <p> Listen 1 {{_HOMEPAGE}}: <a open-url="'http://listen1.github.io/listen1/'"> http://listen1.github.io/listen1/ </a> </p>
                            <p> Listen 1 Fluent {{_HOMEPAGE}}: <a open-url="'https://github.com/Reycn/listen1_desktop_fluent'"> https://github.com/Reycn/listen1_desktop_fluent </a> </p>
                            <p> {{_DESIGNER}}: iparanoid </p>
                            <p> {{_VERSION}}: 2.5.2 {{_LICENSE_NOTICE}}</p>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- track list window-->
                    <div class="page" ng-hide="is_window_hidden==1">
                        <div class="playlist-detail" ng-show="window_type=='list'">
                            <div class="detail-head">
                                <div class="detail-head-cover"><img ng-src="{{ cover_img_url }}"></div>
                                <div class="detail-head-title">
                                    <h2>{{ playlist_title }}</h2>
                                    <div class="playlist-button-list">
                                        <div class="playlist-button playadd-button">
                                            <div class="play-list" ng-click="playMylist(list_id)"><span class="icon li-play-s"></span>
                                              {{_PLAY_ALL}}
                                            </div>
                                            <div class="add-list" ng-click="addMylist(list_id)"><span class="icon li-add"></span></div>
                                        </div>
                                        <div class="playlist-button clone-button" ng-show="!is_mine" ng-click="clonePlaylist(list_id)">
                                            <div class="play-list"><span class="icon li-songlist"></span><span>{{_ADD_TO_PLAYLIST}}</span></div>
                                        </div>
                                        <div class="playlist-button edit-button" ng-show="is_mine" ng-click="showDialog(3, {list_id: list_id, playlist_title: playlist_title, cover_img_url: cover_img_url})">
                                            <div class="play-list"><svg class="feather"><use xlink:href="images/feather-sprite.svg#edit"></use></svg><span>{{_EDIT}}</span></div>
                                        </div>
                                        <div class="playlist-button edit-button" ng-show="!is_mine" open-url="playlist_source_url">
                                            <div class="play-list"><span class="icon li-link"></span><span>{{_ORIGIN_LINK}}</span></div>
                                        </div>
                                        <div class="playlist-button edit-button" ng-show="is_mine" ng-click="showDialog(6)">
                                            <div class="play-list"><svg class="feather"><use xlink:href="images/feather-sprite.svg#git-merge"></use></svg><span>{{_IMPORT}}</span></div>
                                        </div>
                                    </div>
                                  </div>

                        </div>
                        <ul class="detail-songlist">
                            <li class="head">
                                <div class="title"><a>{{_SONGS}}</a></div>
                                <div class="artist"><a>{{_ARTISTS}}</a></div>
                                <div class="album"><a>{{_ALBUMS}}</a></div>
                                <div class="tools">{{_OPERATION}}</div>
                            </li>
                            <li ng-repeat="song in songs track by $index" ng-class-odd="'odd'" ng-class-even="'even'" ng-mouseenter="options=true" ng-mouseleave="options=false">
                                <div class="title"><a class="disabled" ng-if="song.disabled" ng-click="copyrightNotice()">{{ song.title }}</a><a ng-if="!song.disabled" add-and-play="song">{{ song.title }}</a></div>
                                <div class="artist"><a ng-click="showPlaylist(song.artist_id)">{{ song.artist }}</a></div>
                                <div class="album"><a ng-click="showPlaylist(song.album_id)">{{ song.album }}</a></div>
                                <div class="tools">
                                    <a title="{{_ADD_TO_QUEUE}}" class="detail-add-button" add-without-play="song" ng-show="options"><span class="icon li-add"></span></a>
                                    <a title="{{_ADD_TO_PLAYLIST}}" class="detail-fav-button" ng-show="options" ng-click="showDialog(0, song)"><span class="icon li-songlist"></span></a>
                                    <a title="{{_REMOVE_FROM_PLAYLIST}}" class="detail-delete-button" ng-click="removeSongFromPlaylist(song, list_id)" ng-show="options && is_mine=='1' "><span class="icon li-del"></span></a>
                                    <a title="{{_ORIGIN_LINK}}" class="source-button" open-url="song.source_url" ng-show="options"><span class="icon li-link"></span></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- now playing window-->
                        <div class="songdetail-wrapper" ng-show="window_type=='track'">
                            <div class="close" ng-class="isMac? 'mac':'' "ng-click="popWindow()"><svg class="icon"><use xlink:href="images/feather-sprite.svg#chevron-down"></use></svg></div>

                            <div ng-if="!isChrome && !isMac" class="window-control">
                              <svg class="icon" window-control="window_min"><use xlink:href="images/feather-sprite.svg#minimize-2"></use></svg>
                              <svg class="icon" window-control="window_max"><use xlink:href="images/feather-sprite.svg#maximize" ></use></svg>
                              <svg class="icon" window-control="window_close"><use xlink:href="images/feather-sprite.svg#x"></use></svg>
                            </div>

                        <div class="playsong-detail">
                            <div class="detail-head">
                                <div class="detail-head-cover"><img ng-src="{{ currentPlaying.img_url  }}"></div>
                                <div class="detail-head-title">
                                    <!--<a title="加入收藏" class="clone" ng-click="showDialog(0, currentPlaying)">收藏</a>
<a open-url="currentPlaying.source_url" title="原始链接" class="link">原始链接</a>--></div>
                                </div>
                                <div class="detail-songinfo">
                                    <h2>{{ currentPlaying.title }}</h2>
                                    <div class="info">
                                        <div class="singer"><span>{{_ARTIST}}： </span><a ng-click="showPlaylist(currentPlaying.artist_id)" title="{{currentPlaying.artist}}">{{ currentPlaying.artist }}</a></div>
                                        <div class="album"><span>{{_ALBUM}}： </span><a ng-click="showPlaylist(currentPlaying.album_id)" title="{{currentPlaying.album}}">{{ currentPlaying.album }}</a></div>
                                    </div>
                                    <div class="lyric">
                                        <div class="placeholder"></div>
                                        <p ng-repeat="line in lyricArray track by $index" ng-class="{ 'highlight': line.lineNumber == lyricLineNumber }">{{ line.content }} </p>
                                        <div class="placeholder"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="left-control">
              <span class="icon li-previous" prev-track=""></span>
              <span class="icon li-play play" ng-class="isPlaying? 'li-pause': 'li-play'"  play-pause-toggle=""></span>
              <span class="icon li-next" next-track=""></span>
            </div>
            <div class="main-info">
                <div class="logo-banner" ng-if="playlist.length == 0"><svg class="logo" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#666666" stroke="#666666" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polygon points="7 4 7 19 16 19 16 16 10 16 10 4"></polygon><polygon points="13 4 13 13 16 13 16 4"></polygon></svg></div>
                <img
                    class="cover" ng-if="playlist.length > 0" ng-src="{{ currentPlaying.img_url }}" ng-click="toggleWindow('/now_playing')">
                    <div class="detail" ng-if="playlist.length > 0">

                <div class="ctrl">
                    <a ng-click="showDialog(0, currentPlaying)" title="{{_ADD_TO_PLAYLIST}}">
                        <span class="icon li-songlist"></span>
                    </a>
                    <a title="{{ settings.playmode | playmode_title }}(s)" ng-click="changePlaymode()">
                        <span ng-show="settings.playmode == 0" class="icon li-loop"></span>
                        <span ng-show="settings.playmode == 1" class="icon li-random-loop"></span>
                        <span ng-show="settings.playmode == 2" class="icon li-single-cycle"></span>
                    </a>
                </div>

                        <div class="title">{{ currentPlaying.title }}</div>
                        <div class="more-info">
                            <div class="current">{{ currentPosition }}</div>
                            <div class="singer"><a ng-click="showPlaylist(currentPlaying.artist_id)">{{ currentPlaying.artist }}</a> - <a ng-click="showPlaylist(currentPlaying.album_id)">{{ currentPlaying.album }}</a></div>
                            <div class="total"> {{ currentDuration }}</div>
                        </div>
                        <div class="playbar">
                            <div class="barbg" id="progressbar" mode="play" draggable="">
                                <!-- <div class="rdy" ng-style="{width : myProgress + '%' }"></div>-->
                                <div class="cur" ng-style="{width : myProgress + '%' }"><span class="btn"><i></i></span></div>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="right-control">
                <div class="playlist-toggle">
                  <span ng-click="togglePlaylist()" class="icon li-list"></span>
                </div>
                <div class="volume-ctrl" volume-wheel="">
                  <span class="icon"  ng-class="mute? 'li-mute': 'li-volume'" ng-click="toggleMuteStatus()"></span>
                    <div class="m-pbar volume">
                        <div class="barbg" id="volumebar" mode="volume" draggable="">
                            <div class="cur" ng-style="{width : volume + '%' }"><span class="btn"><i></i></span></div>
                        </div>
                    </div>
                </div>
                <div ng-if="!isChrome" class="lyric-toggle">
                  <div ng-click="openLyricFloatingWindow(true)" class="lyric-icon" ng-class="{'selected': enableLyricFloatingWindow}">词</div>
                </div>
            </div>
            <div class="menu" ng-hide="menuHidden">
                <div class="menu-header"><span class="menu-title">{{_TOTAL_SONG_PREFIX}}{{playlist.length}}{{_TOTAL_SONG_POSTFIX}}</span>
                  <a class="add-all" ng-click="showDialog(0, playlist)">
                    <span class="icon li-songlist" ng-click="togglePlaylist()"></span>
                    <span>{{_ADD_TO_PLAYLIST}}</span></a>
                <a class="remove-all" clear-playlist=""><span class="icon li-del" ng-click="togglePlaylist()"></span><span>{{_CLEAR_ALL}}</span></a>

                <a class="close" ng-click="togglePlaylist()"><svg class="feather"><use xlink:href="images/feather-sprite.svg#x"></use></svg></a>
            </div>
            <ul class="menu-list">
                <li id="song{{ song.id }}" ng-repeat="song in playlist track by $index" ng-class="{ playing: currentPlaying.id == song.id }" ng-mouseenter="playlist_highlight=true" ng-mouseleave="playlist_highlight=false" ng-class-odd="'odd'" ng-class-even="'even'">
                    <div class="song-status-icon"><svg class="feather play" ng-show="currentPlaying.id == song.id"><use xlink:href="images/feather-sprite.svg#play"></use></svg></div>
                    <div class="song-title"><a play-from-playlist="song">{{ song.title }}</a></div>
                    <div class="song-singer"><a ng-click="showPlaylist(song.artist_id); togglePlaylist();">{{ song.artist }}</a></div>
                    <div class="tools">
                        <span remove-from-playlist="song" data-index="{{$index}}" ng-show="playlist_highlight" class="icon li-del"></span>
                        <span open-url="song.source_url" ng-show="playlist_highlight" class="icon li-link"></span>
                    </div>
                    <!-- <div class="song-time">00:00</div> -->
                </li>
            </ul>
        </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <!-- init soundManager2 player-->
    <sound-manager></sound-manager>
</body>

</html>